<template>
	<view class="content">
		<SideEdge :Dataindex='2'></SideEdge>
		<view class="right">
			<search></search>
			<view class="chapterBox">
				<up-collapse>
					<up-collapse-item :title="item.chapter" v-for="(item,index) in list" :key='index'>
						<view class="second" v-for="nav in item.joint" :key="nav" @click.stop='onclick(nav)'>
							{{nav.joint}}
						</view>
					</up-collapse-item>
				</up-collapse>
			</view>
			<!-- <view class="btnBox">
				<view class="btn">上一章</view>
				<view class="btn">下一章</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance
	} from "vue";
	const {
		proxy
	} = getCurrentInstance();

	import {
		chapterList
	} from '@/common/api/subject.js'

	function onclick(nav) {
		uni.navigateTo({
			url: `/pages/index/exercises?joint=${nav.joint}&subject_id=${proxy.$page.options.subject_id}&class=${proxy.$page.options.class}`
		})
	}

	import {
		ref
	} from "vue"
	const list = ref([])

	// 获取章节信息
	function getData() {
		chapterList({
			subject_id: proxy.$page.options.subject_id
		}).then(res => {
			list.value = res.data
		})
	}
	getData()
</script>

<style>
	page {
		width: 100%;
		height: auto;
		background: #F7F7F7;
		overflow-x: hidden;
	}
</style>

<style lang="scss" scoped>
	::v-deep .u-line {
		display: none !important;
	}

	::v-deep .u-cell__body__content {
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 24px;
		color: #040404;
		line-height: 26px;
	}

	::v-deep .u-icon__icon {
		font-size: 26px !important;
		line-height: 26px !important;
	}

	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		position: relative;
	}

	.content .right {
		width: calc(100vw - 300px);
		height: 100vh;
		overflow: overlay;

		.chapterBox {
			margin: 20px 16px;
			overflow: auto;
			max-height: calc(100vh - 220px );
			background: #FFFFFF;
			box-shadow: 0px 6px 58px 0px rgba(124, 124, 124, 0.1);
			border-radius: 20px;
			padding: 20px 0;

			.second {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 24px;
				color: #787774;
				line-height: 26px;
				text-align: left;
				font-style: normal;
				margin-left: 32px;
				margin-top: 40px;
			}

			.second:nth-child(1) {
				margin-top: 0;
			}
		}
	}

	.btnBox {
		margin: 20px 16px 40px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn {
			width: 200px;
			height: 68px;
			background: #040404;
			border-radius: 12px;

			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 24px;
			color: #FFFFFF;
			line-height: 26px;

			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn:nth-child(1) {
			border: 1px solid #040404;
			color: #040404;
			background: transparent;
		}
	}
</style>